<template>
  <BaseDialog
    :visible="visible"
    title="密码验证"
    width="400px"
    :close-on-click-modal="false"
    :close-on-press-escape="false"
    :show-close="false"
    footer-type="default"
    cancel-text="取消"
    confirm-text="确认"
    :confirm-loading="loading"
    @close="handleClose"
    @cancel="handleCancel"
    @confirm="handleConfirm"
    @update:visible="$emit('update:visible', $event)"
  >
    <div class="password-dialog-content">
      <div class="password-icon">
        <el-icon size="48" color="#f56c6c">
          <Lock />
        </el-icon>
      </div>
      
      <div class="password-title">
        请输入登录密码以继续操作
      </div>
      
      <div class="password-description">
        为了安全起见，删除操作需要验证您的登录密码<br>
        请输入您登录时使用的密码
      </div>
      
      <el-form
        ref="formRef"
        :model="form"
        :rules="rules"
        label-width="0"
        @submit.prevent="handleConfirm"
      >
        <el-form-item prop="password">
          <el-input
            v-model="form.password"
            type="password"
            placeholder="请输入登录密码"
            show-password
            clearable
            :disabled="loading"
            @keyup.enter="handleConfirm"
          />
        </el-form-item>
      </el-form>
      
      <div v-if="errorMessage" class="error-message">
        <el-icon><Warning /></el-icon>
        {{ errorMessage }}
      </div>
    </div>
  </BaseDialog>
</template>

<script setup lang="ts">
import { ref, reactive, nextTick } from 'vue'
import { ElForm, ElFormItem, ElInput, ElIcon, ElMessage } from 'element-plus'
import { Lock, Warning } from '@element-plus/icons-vue'
import BaseDialog from './BaseDialog.vue'

// Props 接口定义
interface Props {
  visible: boolean
  title?: string
  description?: string
}

// 默认属性值
const props = withDefaults(defineProps<Props>(), {
  title: '密码验证',
  description: '为了安全起见，删除操作需要验证您的登录密码'
})

// 事件定义
const emit = defineEmits<{
  'update:visible': [value: boolean]
  'close': []
  'cancel': []
  'confirm': [password: string]
}>()

// 响应式数据
const loading = ref(false)
const errorMessage = ref('')
const formRef = ref<InstanceType<typeof ElForm>>()

// 表单数据
const form = reactive({
  password: ''
})

// 表单验证规则
const rules = {
  password: [
    { required: true, message: '请输入登录密码', trigger: 'blur' },
    { min: 1, message: '密码不能为空', trigger: 'blur' }
  ]
}

// 处理关闭
const handleClose = () => {
  resetForm()
  emit('close')
  emit('update:visible', false)
}

// 处理取消
const handleCancel = () => {
  resetForm()
  emit('cancel')
  emit('update:visible', false)
}

// 处理确认
const handleConfirm = async () => {
  if (!formRef.value) return
  
  try {
    // 验证表单
    await formRef.value.validate()
    
    if (!form.password.trim()) {
      errorMessage.value = '请输入登录密码'
      return
    }
    
    loading.value = true
    errorMessage.value = ''
    
    // 发送密码给父组件进行验证
    emit('confirm', form.password.trim())
    
  } catch (error) {
    console.error('表单验证失败:', error)
  }
}

// 重置表单
const resetForm = () => {
  form.password = ''
  errorMessage.value = ''
  loading.value = false
  
  // 清除表单验证状态
  nextTick(() => {
    if (formRef.value) {
      formRef.value.clearValidate()
    }
  })
}

// 设置错误信息
const setError = (message: string) => {
  errorMessage.value = message
  loading.value = false
}

// 设置加载状态
const setLoading = (isLoading: boolean) => {
  loading.value = isLoading
}

// 暴露方法给父组件
defineExpose({
  setError,
  setLoading,
  resetForm
})
</script>

<style scoped>
.password-dialog-content {
  padding: 20px 0;
  text-align: center;
}

.password-icon {
  margin-bottom: 20px;
}

.password-title {
  font-size: 18px;
  font-weight: 600;
  color: #303133;
  margin-bottom: 12px;
}

.password-description {
  font-size: 14px;
  color: #909399;
  margin-bottom: 24px;
  line-height: 1.5;
}

.error-message {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin-top: 12px;
  padding: 8px 12px;
  background-color: #fef0f0;
  border: 1px solid #fbc4c4;
  border-radius: 4px;
  color: #f56c6c;
  font-size: 13px;
}

:deep(.el-form-item) {
  margin-bottom: 0;
}

:deep(.el-input__wrapper) {
  border-radius: 6px;
}

:deep(.el-input__inner) {
  text-align: center;
  font-size: 16px;
  letter-spacing: 1px;
}
</style>
